<template>
  <div>
    <el-tabs v-model="activeName" style="margin-top:8px;padding:0 20px;">
      <el-tab-pane label="课程管理" name="first">
        <ul class="checknum">
          <li>
            课程 :
            <span>{{ total }}</span> 个
          </li>
          <li>
            已发布 :
            <span>{{ published }}</span> 个
          </li>
          <li>
            已关闭 :
            <span>{{ closed }}</span> 个
          </li>
          <li>
            未发布 :
            <span>{{ draft }}</span> 个
          </li>
        </ul>
        <list v-if="activeName === 'first'" @statistic="getCheckNum"/>
      </el-tab-pane>
      <el-tab-pane label="课程推荐" name="second">
        <recommend-course v-if="activeName === 'second'"/>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import List from './components/course/list'
import allTable from '@/components/Eltable'
import RecommendCourse from './components/course/recommendCourse'
export default {
  components: {
    RecommendCourse,
    List,
    allTable
  },
  data() {
    return {
      activeName: 'first',
      total: '',
      published: '',
      closed: '',
      draft: ''
    }
  },
  methods: {
    getCheckNum(data) {
      this.total = data[0];
      this.published = data[1];
      this.draft = data[2];
      this.closed = data[3]
    }
  }
}
</script>

<style lang="scss" scoped>
.subtag {
  width: 100%;
  height: 44px;
  line-height: 44px;
  padding-left: 11px;
  background-color: #f8f8f8;
  p {
    margin: 0;
    .subtitle {
      padding: 7px 20px;
      border-radius: 6px;
      background-color: #409eff;
      color: #fff;
      font-size: 12px;
    }
    .more {
      float: right;
      height: 40px;
    }
  }
}
.checknum {
  list-style: none;
  padding: 0;
  margin: 0 0 21px;
  height: 44px;
  line-height: 44px;
  box-sizing: border-box;
  background-color: #f8f8f8;
  li {
    float: left;
    display: block;
    margin-right: 20px;
    color: #72726f;
    span {
      color: rgb(15, 202, 62);
      font-weight: 600;
    }
  }
}
</style>
